<template>
  <div class="recommend">
    <div class="main">
      <!--图书begin-->
      <div class="home-main" v-for="(item,index) in booksList" :key="index">
        <div class="subtitle" @click="goToBookList(item)">
          <p v-text="item.columnName">图书</p>
          <span>
            <span class='more'>更多</span>
            <img src="../../../../static/home/next.png" alt="" width="6px" height="12px" />
          </span>
        </div>

        <div class="content">
          <div class="sm-content" v-for="(todo,index) in item.recommendResList" :key="index" @click="goToBook(todo)">
            <img :src="todo.cover" if='todo.cover' />
            <span v-html="todo.bookName">边城</span>
            <span v-html="todo.externalSourceName">边城</span>
          </div>
        </div>
      </div>

      <!--期刊-->
      <div class="home-main" v-for="(item,index) in periodicalList" :key="index">
        <div class="subtitle" @click="goToPerList()">
          <p v-text="item.columnName">期刊</p>
          <span>
            <span class='more'>更多</span>
            <img src="../../../../static/home/next.png" alt="" width="6px" height="12px" />
          </span>
        </div>

        <div class="content">
          <!-- <router-link class="sm-content" v-for="(todo,index) in item.recommendResList" :key="index" :to='{name:"periodicallist",params:{perdata:JSON.stringify(todo)}}'> -->
          <router-link class="sm-content" v-for="(todo,index) in item.recommendResList" :key="index" :to='{name:"periodicallist",params:{perdata:JSON.stringify(todo),type:1}}'>
            <img :src="perSrcsmail+todo.cover+'.jpg'" onerror="this.src='../../../../static/home/tushu.png'" />
            <span style="font-size: 12px;"> 更新{{todo.externalSourcePeriods}}期</span>
            <span v-text="todo.source">边城</span>
          </router-link>
        </div>
      </div>

      <!--报纸-->
      <div class="home-main" v-for="(item,index) in newspaperList" :key="index">
        <div class="subtitle">
          <p v-text="item.columnName">图书</p>
          <span>
            <router-link class='more' to='newspaperclass'>更多</router-link>
            <img src="../../../../static/home/next.png" alt="" width="6px" height="12px" />
          </span>
        </div>
        <div class="content">
          <router-link class="sm-content" v-for="(todo,index) in item.recommendResList" :key="index" :to='{name:"newspapercontent", params:{parperdata:JSON.stringify(todo),type:1}}'>
            <img :src="paperImgSrc+todo.cover+'.jpg'" onerror="this.src='../../../../static/home/tushu.png'" />
            <span style="font-size: 12px;">更新{{(todo.externalSourcePeriods).replace(/-/g,"").substring(0,8)}}期</span>
            <span v-text="todo.paperName">边城</span>
          </router-link>
        </div>
      </div>

      <!-- 视听 -->
      <div v-for="(item,index) in videoList" :key="index">
        <div class="home-main">
          <div class="subtitle" @click="goToVideoList()">
            <p v-text="item.columnName">视听</p>
            <span>
              <span class='more'>更多</span>
              <img src="../../../../static/home/next.png" alt="" width="6px" height="12px" />
            </span>
          </div>
          <div class="content">
            <div class="sm-content" v-for="(todo,index) in item.recommendResList" :key="index">
              <!-- <router-link :to='{name:"videocontent",params:{data:todo}}'> -->
              <div @click="openWeb(todo)">
                <div v-if='todo.resourceFormat == "mp4"'>
                  <img :src="todo.videoCover" alt="" />
                  <span v-text="todo.videoName">奇葩说(2018年4月9日)</span>
                </div>
              </div>
              <!-- </router-link> -->
            </div>
          </div>
        </div>
        <!--音频 -->
        <div class="audio" v-for="(todo,index) in item.recommendResList" :key="index" v-if='todo.resourceFormat == "mp3"'>
          <div class="audio-img">
            <img class="img-one" src="../../../../static/home/play-audio.png" alt="" width="25px" height="25px" />
          </div>
          <router-link class="autio-title" to='musiccontent'>
            <p class="subtitle" v-text="todo.videoName">早读 | 像故事'投诚'的心理机制</p>
            <p class="autio-time">
              <img src="../../../../static/home/Earphone.png" alt="" width="15px" height="15px" />
              <span v-text="todo.resourceFormat">时长22分41秒</span>
            </p>
          </router-link>
        </div>
      </div>

      <!-- 阅读-->
      <div class="home-main" v-for='(item,index) in readList' :key="index">
        <div class="subtitle">
          <p v-text="item.columnName">悦读</p>
          <span>
            <router-link class='more' to='readclass'>更多</router-link>
            <img src="../../../../static/home/next.png" alt="" width="6px" height="12px" />
          </span>
        </div>

        <div class="read-box" @click="goToReadcontent(todo)" v-for="(todo,index) in item.recommendResList" :key="index" >
          <div>
            <img :src="todo.cover" width="115px" height="78px" />
          </div>
          <p class="readfont" v-html="todo.mainTitle">什么理由让你死心塌地的留在这座城市？</p>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import api from "./../../../api/api.js";
import swiper from "./../../subcom/swiper.vue";
import { Indicator } from "mint-ui";
export default {
  components: {
    swiper
  },
  data() {
    return {
      datevalue: "",
      recommendlist: "",
      booksList: [], //书期刊报纸
      periodicalList: [], //期刊
      newspaperList: [], //报纸
      videoList: [], //视频
      readList: [], //文章列表
      paperImgSrc: "", //报纸url
      perSrcsmail: "" //期刊url
    };
  },
  created() {
    this.paperImgSrc = api.paperImgSrc;
    this.perSrcsmail = api.perSrcsmail;
    this.datevalue = this.formatDate(new Date().getTime()); //时间
    this.prePushTime = this.datevalue.substring(0, 11); //取年月日
    this.getRecommend();
  },
  methods: {
    /**
     * 进了阅读详情
     */
    goToReadcontent(data){
      sessionStorage.setItem("readdata",JSON.stringify(data))
      this.$router.push({
        name:"readcontent"
      })
    },
    goToVideoList() {
      this.$router.push({
        name: "videoclass"
      });
      localStorage.setItem("booktypeid", "book35");
      localStorage.setItem("swipeableId", 11);
    },
    goToPerList() {
      this.$router.push({
        name: "periodicalclass"
      });
      localStorage.setItem("type_name", "低碳生活");
    },
    goToBookList(e) {
      localStorage.setItem("columnId", e.columnId);
      localStorage.setItem("booktypeid", 17);
      this.$router.push({
        name: "booklist"
      });
    },
    goToBook(e) {
      localStorage.setItem("bookId", e.bookId);
      this.$router.push({
        name: "bookcontent"
      });
    },
    //推荐模块
    getRecommend() {
      let userId = localStorage.getItem("userid");
      Indicator.open({
        text: "拼命加载中...",
        spinnerType: "triple-bounce"
      });
      this.$http({
        method: "post",
        url: api.baseURL + "getRecommendedResourcesList",
        params: {
          inParam: {
            time: this.datevalue,
            sysCode: "FH_PUBOPE",
            userId: userId,
            resCount: 6, //取几条数据
            prePushTime: this.prePushTime
          }
        }
      })
        .then(response => {
          const recommendlist = response.data.data;
          for (let key of recommendlist) {
            if (key.columnKindDes == 3) {
              this.videoList.push(key);
            } else if (key.columnKindDes == 1) {
              this.booksList.push(key);
              console.log(this.booksList);
            } else if (key.columnKindDes == 4) {
              this.newspaperList.push(key);
            } else if (key.columnKindDes == 5) {
              this.periodicalList.push(key);
            } else if (key.columnKindDes == 2) {
              this.readList.push(key);
            }
          }
          Indicator.close();
        })
        .catch(error => {
          console.log(error);
        });
    },
    openWeb(e) {
      console.log(e);
      this.$router.push({
        name: "videocontent",
        params: {
          videodata: e
        }
      });
    }
  }
};
</script>

<style scoped>
a {
  color: #252525;
}

.home-swipe {
  width: 100%;
  height: 21vh;
  background: skyblue;
}

.home-main {
  width: 100%;
  height: auto;
  margin-bottom: 14px;
}

.home-main .subtitle {
  display: flex;
  padding: 0.5vh 3vw;
  justify-content: space-between;
  align-items: center;
  margin: 1vh 0;
  /*background: silver;*/
}

.home-main .subtitle p {
  font-size: 18px;
  color: black;
  font-weight: 800;
}

.home-main .subtitle .more {
  font-size: 14px;
  color: #b6b6b6;
}

.home-main .content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.home-main .video_content {
  display: flex;
}
.home-main .content .sm-content {
  width: 26%;
  margin-top: 10px;
  /*background: slateblue;*/
  overflow: hidden;
}

.home-main .content .sm-content span {
  font-size: 14px;
}

.home-main .content .sm-content img {
  width: 100%;
  border-radius: 10px;
  box-shadow: darkgrey 2px 2px 5px;
  /*background: darkorange;*/
}

.home-main .content .sm-content span {
  width: 100%;
  font-family: "microsoft yahei";
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /*background: red;*/
}
/*--------- audio ------- */

.main .audio {
  width: 95%;
  background-color: #ffffff;
  border: 1px solid #f2f2f2;
  box-shadow: darkgrey 1px 1px 2px;
  border-radius: 8px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}

.main .audio .audio-img {
  width: 50px;
  height: 50px;
  margin: 15px 0 15px 15px;
  background: url(../../../../static/music.png) no-repeat;
  background-size: cover;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main .audio .autio-title {
  margin-left: 20px;
  font-size: 15px;
  color: #252525;
}

.main .audio .autio-title .subtitle {
  margin-bottom: 12px;
}

.main .audio .autio-title .autio-time {
  font-size: 12px;
  color: #252525;
  display: flex;
  align-items: center;
}

.main .audio .autio-time span {
  margin-left: 14px;
}

.main .audio .autio-time .color {
  color: #e60012;
}
/*-----------read-----------*/

.main .read-box {
  width: 95%;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 8px;
  margin: 0 auto;
  border: 1px solid #f2f2f2;
  box-shadow: darkgrey 1px 1px 5px;
  margin-bottom: 16px;
}

.main .read-box img {
  margin: 10px 0;
  margin-left: 10px;
  font-size: 15px;
}

.main .read-box p {
  margin-left: 22px;
  padding-right: 16px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/*--------video------------------*/

.main .video-box {
  width: 95%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #ffffff;
  border-radius: 8px;
  margin: 0 auto;
  border: 1px solid #f2f2f2;
  margin-bottom: 10px;
  box-shadow: darkgrey 1px 1px 5px;
  font-size: 14px;
  padding: 10px 0;
}

.main .video-box p {
  width: 101px;
}
</style>